//主轮播图
$(function () {
    $("#bannerInner").tyslide({
        boxh: 420,//盒子的高度
        w: 1000,//盒子的宽度
        h: 390,//图片的高度
        isShow: true,//是否显示控制器
        isShowBtn: true,//是否显示左右按钮
        controltop: 40,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 20,//控制按钮宽度
        controlsH: 20,//控制按钮高度
        radius: 0,//控制按钮圆角度数
        controlsColor: "#d7d7d7",//普通控制按钮的颜色
        controlsCurrentColor: "#ff6600",//当前控制按钮的颜色
        isShowNum: true //是否显示数字
    });
    // 1.电子书的轮播图
    $("#ebooks .SliderPic").tyslide({
        boxh: 214,//盒子的高度
        w: 330,//盒子的宽度
        h: 214,//图片的高度
        isShow: true,//是否显示控制器
        isShowBtn: true,//是否显示左右按钮
        controltop: 5,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 20,//控制按钮宽度
        controlsH: 4,//控制按钮高度
        radius: 0,//控制按钮圆角度数
        controlsColor: "#d7d7d7",//普通控制按钮的颜色
        controlsCurrentColor: "#ff6600",//当前控制按钮的颜色
        isShowNum: false //是否显示数字
    });
    // 2.楼层头部tab栏切换和电子书tab栏切换
    $('.title_tab li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        console.log(($(this)).index());
        $('.box_body_content').stop().fadeOut().eq($(this).index()).stop().fadeIn();
    })
    // !!!!!!!我需要重点复习的内容
    //匹配对应内容 通过索引来匹配
    //获取当前li的索引
    //var index=$(this).index()
    $('#ebooks .ebooksTab li').click(function () {
        $(this).addClass("current").siblings().removeClass("current");

        //获取当前li的索引 ; var index=$(this).index()
        console.log($(this).index());
        $('#ebooks .content .items').fadeOut().eq($(this).index()).fadeIn();
    })

    // 3.楼层轮播图
    $(".item2 .picslid").tyslide({
        boxh: 338,//盒子的高度
        w: 429,//盒子的宽度
        h: 338,//图片的高度
        isShow: true,//是否显示控制器
        isShowBtn: true,//是否显示左右按钮
        controltop: 5,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 20,//控制按钮宽度
        controlsH: 4,//控制按钮高度
        radius: 0,//控制按钮圆角度数
        controlsColor: "#d7d7d7",//普通控制按钮的颜色
        controlsCurrentColor: "#ff6600",//当前控制按钮的颜色
        isShowNum: false //是否显示数字
    });
    // 4.固定头部
    $(window).scroll(function () {
        if ($(document).scrollTop() >= 300) {
            $("#fixedHeader").fadeIn();
        } else {
            $("#fixedHeader").fadeOut();
        }
    })
    // 5.精灵图固定左侧楼梯导航
    // 求出今日推荐距离网页顶部的距离scrollTop
    var scrollTop = $('#recommend').offset().top;
    console.log(scrollTop);
    $(window).scroll(function () {
        // 如果划动的距离大于等于scrollTop则会显示左侧导航栏，否则不会
        if ($(document).scrollTop() >= scrollTop) {
            $('#floorBox').fadeIn();
        } else {
            $('#floorBox').fadeOut();
        }
    })
    $('#floorBox .bg06').click(function () {
        $('html,body').stop().animate({
            scrollTop: 0
        }, 1000)
    })
    // 6.点击电梯导航页面可以滚动到相应内容区域
    $('#floorBox .bg01,.bg02,.bg03,.bg04,.bg05').click(function () {
        console.log($(this).index());
        var current = $(".floor .container").eq($(this).index()).offset().top;
        $('html,body').stop().animate({
            scrollTop: current
        })

    })
    $(window).scroll(function () {
        $('.floor .container').each(function (i, ele) {
            if ($(document).scrollTop() >= $(ele).offset().top) {
                console.log(i);
                $('#floorBox li').eq(i).addClass('showcolor').siblings().removeClass('showcolor');
            }
        })
    })

})

// 电子书右边 手风琴效果
var liRights = document.querySelectorAll("#ebooks .ebooksRight ul li");
var bookSpans = document.querySelectorAll("#ebooks .ebooksRight span");
console.log(bookSpans);
for (let i = 0; i < liRights.length; i++) {
    liRights[i].addEventListener("mouseover", function () {
        for (let i = 0; i < liRights.length; i++) {
            liRights[i].className = "";
            bookSpans[i].className = "pa";
        }
        liRights[i].className = "active";
        bookSpans[i].className = " cf60 pa";
    })


}

// 固定菜单栏--精灵图
var floorA = document.querySelectorAll("#floorBox li");
var floorSpan = document.querySelectorAll("#floorBox span");
for (let i = 0; i < floorA.length; i++) {
    //1 移入事件
    floorA[i].addEventListener("mouseover", function () {
        floorSpan[i].className = "on";
    })
    // 2 移出事件
    floorA[i].addEventListener("mouseout", function () {
        floorSpan[i].className = "";
    })
}




// 精灵图固定左侧楼梯导航

